import { reactive, ref } from "vue";

const title = ref('我是jsx组件');
let inputValue = ref<number>(0);
let arr = reactive([1, 2, 3, 4]);
let arr2 = reactive([4, 4, 4, 4]);

let addNum = () => {
    inputValue.value++;
    console.log('addNum:', inputValue.value);
};


// Props 接受值
type Props = {
    color: string
};

let clickTap = (ctx: any) => {
    ctx.emit('on-click', ctx)
};


// 函数组件
let renderDom = (props: Props, content: any) => {
    return (
        <div class="jsxWrap">
            <h4>{title.value}</h4>
            <hr />
            <input type="text" v-model={inputValue.value}></input>
            <button onClick={addNum}>add</button>
            <hr />
            {/* v-if是不支持的 */}
            <h3 v-show={inputValue.value > 10}>{inputValue.value}</h3>
            <hr />
            {/* v-for也是不支持的 需要使用Map*/}
            <div>
                {
                    arr.map((item,idx) => {
                        return (<p>{item}-----{idx}</p>);
                    })
                }
            </div>
            <hr />
            {/* v-bind使用  直接赋值就可以*/}
            <div data-arr={arr2}></div>
            <hr />
            <i>color:{props.color}</i>
            <hr />
            {/* Emit派发 */}
            <button onClick={clickTap.bind(this, content)}>点击</button>
        </div>
    );
};

export default renderDom;